<template>
  <el-dialog
    :modelValue="modelValue"
    title="添加"
    :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="项目名">
        <el-input v-model="form.projectName" />
      </el-form-item>
      <el-form-item label="gitee用户名">
        <el-input v-model="form.giteeName" />
      </el-form-item>
      <el-form-item label="gitee项目名">
        <el-input v-model="form.projectGiteeName" />
      </el-form-item>
      <p>
        对应地址: <a :href="giteeAddress" target="_blank">{{giteeAddress}}</a>
      </p>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSave">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { testUrl } from '~/services'
import useStoreStu from '~/store/stu'
defineProps(
  {
    modelValue: {
      type: Boolean,
      isRequired: true
    }
  })
const emit = defineEmits(['update:modelValue'])

const giteeAddress = computed(() => {
  // return `https://gitee.com/${form.giteeName}/${form.projectGiteeName}`
  return 'https://gitee.com/' + form.giteeName + '/' + form.projectGiteeName
})
const storeStu = useStoreStu()
// const dialogVisible = ref(props.modelValue)
const form = reactive({
  name: '小花同学',
  projectName: '小兔鲜',
  giteeName: 'xiaohuahua',
  projectGiteeName: 'rabbit'
})

const onSave = () => {
  testUrl(giteeAddress.value)
  storeStu.add({ ...form, list: {} })
  handleClose()
}
const handleClose = () => {
  emit('update:modelValue', false)
}
</script>
